<template>
  <div style="background: #fff; height: 100%">
    <div class="enterpriseInfoTab">
      <ul>
        <li>
          <a
            @click="
              enterpriseInfoRouter(
                '/dlyrl/hr/enterpriseuserinformation/EnterpriseUserInformationList'
              )
            "
          >
            用户信息
          </a>
        </li>
        <li>
          <a
            @click="enterpriseInfoRouter('/dlyrl/hr/checkinrecord/CheckinRecordList')"
          >
            考勤记录
          </a>
        </li>
        <li class="defaultActive">
          <a
            @click="
              enterpriseInfoRouter('/dlyrl/hr/addressbook/AddressBookList')
            "
          >
            通讯录
          </a>
        </li>
      </ul>
    </div>
    <div>
      <el-form
        size="small"
        :inline="true"
        class="query-form"
        ref="searchForm"
        :model="searchForm"
        @keyup.enter.native="refreshList()"
        @submit.native.prevent
        style="padding-left: 15px"
      >
        <!-- 搜索框-->
        <el-form-item prop="userName">
          <el-input
            size="small"
            v-model="searchForm.userName"
            placeholder="姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="userSex">
          <el-input
            size="small"
            v-model="searchForm.userSex"
            placeholder="性别"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="userIdcard">
          <el-input
            size="small"
            v-model="searchForm.userIdcard"
            placeholder="身份证号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="userPhone">
          <el-input
            size="small"
            v-model="searchForm.userPhone"
            placeholder="电话"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="officeClass">
          <el-input
            size="small"
            v-model="searchForm.officeClass"
            placeholder="办公室"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary" @click="refreshList()" size="small"
            >查询</el-button
          >
          <el-button @click="resetSearch()" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 导入导出-->
      <el-dialog title="导入Excel" :visible.sync="isImportCollapse">
        <el-form
          size="small"
          :inline="true"
          v-show="isImportCollapse"
          ref="importForm"
        >
          <el-form-item>
            <el-button type="default" @click="downloadTpl()" size="small"
              >下载模板</el-button
            >
          </el-form-item>
          <el-form-item prop="loginName">
            <el-upload
              class="upload-demo"
              :action="`${this.$http.BASE_URL}/dlyrl/hr/addressbook/addressBook/import`"
              :on-success="uploadSuccess"
              :show-file-list="true"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只允许导入“xls”或“xlsx”格式文件！
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-dialog>
      <div style="padding: 0 15px">
        <el-row>
          <el-button
            v-if="hasPermission('dlyrl:hr:addressbook:addressBook:add')"
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="add()"
            >新建</el-button
          >
          <el-button
            v-if="hasPermission('dlyrl:hr:addressbook:addressBook:edit')"
            type="warning"
            size="small"
            icon="el-icon-edit-outline"
            @click="edit()"
            :disabled="dataListSelections.length != 1"
            plain
            >修改</el-button
          >
          <el-button
            v-if="hasPermission('dlyrl:hr:addressbook:addressBook:del')"
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="del()"
            :disabled="dataListSelections.length <= 0"
            plain
            >删除
          </el-button>
          <el-button-group class="pull-right">
            <el-button
              v-if="hasPermission('dlyrl:hr:addressbook:addressBook:import')"
              type="default"
              size="small"
              icon="el-icon-upload2"
              title="导入"
              @click="isImportCollapse = !isImportCollapse"
            ></el-button>
            <el-button
              v-if="hasPermission('dlyrl:hr:addressbook:addressBook:export')"
              type="default"
              size="small"
              icon="el-icon-download"
              title="导出"
              @click="exportExcel()"
            ></el-button>
            <el-button
              type="default"
              size="small"
              icon="el-icon-refresh"
              @click="refreshList"
            >
            </el-button>
          </el-button-group>
        </el-row>
        <el-table
          :cell-style="cellStyle"
          style="border: 1px solid #d6cfe2"
          :header-cell-class-name="cellHeadStyle"
          :row-class-name="tableRowClassName"
          :data="dataList"
          size="small"
          @selection-change="selectionChangeHandle"
          @sort-change="sortChangeHandle"
          v-loading="loading"
          class="table"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            show-overflow-tooltip 
            align="center"
            label="姓名"
          >
            <!-- <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                v-if="hasPermission('dlyrl:hr:addressbook:addressBook:edit')"
                @click="edit(scope.row.id)"
                >{{ scope.row.userName }}</el-link
              >
              <el-link
                type="primary"
                :underline="false"
                v-else-if="
                  hasPermission('dlyrl:hr:addressbook:addressBook:view')
                "
                @click="view(scope.row.id)"
                >{{ scope.row.userName }}</el-link
              >
              <span v-else>{{ scope.row.userName }}</span>
            </template> -->
             <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="view(scope.row.id)"
                >{{ scope.row.userName }}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="userSex"
            show-overflow-tooltip 
            align="center"
            label="性别"
          >
          </el-table-column>
          <el-table-column prop="userIdcard" label="身份证号" width="110" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.userIdcard? scope.row.userIdcard.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2"):""}}</template>
				</el-table-column>
          <el-table-column prop="userPhone" label="电话" width="110" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.userPhone?scope.row.userPhone.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"):""}}</template>
        </el-table-column>
          <el-table-column
            prop="department.name"
            show-overflow-tooltip 
            label="部门"
          >
          </el-table-column>
          <el-table-column
            prop="job"
            show-overflow-tooltip 
            label="岗位"
          >
          </el-table-column>
          <el-table-column
            prop="company.companyName"
            show-overflow-tooltip 
            label="公司"
          >
          </el-table-column>
          <el-table-column
            prop="userInfo.userName"
            show-overflow-tooltip 
            label="个人用户"
          >
          </el-table-column>
          <!-- <el-table-column
            header-align="center"
            align="center"
            fixed="right"
            :key="Math.random()"
            width="200"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                v-if="hasPermission('dlyrl:hr:addressbook:addressBook:view')"
                type="text"
                icon="el-icon-view"
                size="mini"
                @click="view(scope.row.id)"
                >查看</el-button
              >
              <el-button
                v-if="hasPermission('dlyrl:hr:addressbook:addressBook:edit')"
                type="text"
                icon="el-icon-edit"
                size="mini"
                @click="edit(scope.row.id)"
                >修改</el-button
              >
              <el-button
                v-if="hasPermission('dlyrl:hr:addressbook:addressBook:del')"
                type="text"
                icon="el-icon-delete"
                size="mini"
                @click="del(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <AddressBookForm
      ref="addressBookForm"
      @refreshDataList="refreshList"
    ></AddressBookForm>
  </div>
</template>

<script>
import tableStyles from "../../../../../utils/mixins.js";
import AddressBookForm from "./AddressBookForm";
export default {
  mixins: [tableStyles],
  data() {
    return {
      searchForm: {
        userName: "",
        userSex: "",
        userIdcard: "",
        userPhone: "",
        officeClass: "",
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      dataListSelections: [],
      isImportCollapse: false,
      loading: false,
    };
  },
  components: {
    AddressBookForm,
  },
  activated() {
    this.refreshList();
  },
  methods: {
    //跳转
    enterpriseInfoRouter(url) {
      this.$router.push(url);
    },
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/addressbook/addressBook/list",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          orderBy: this.orderBy,
          ...this.searchForm,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    // 排序
    sortChangeHandle(obj) {
      if (obj.order === "ascending") {
        this.orderBy = obj.prop + " asc";
      } else if (obj.order === "descending") {
        this.orderBy = obj.prop + " desc";
      } else {
        this.orderBy = "";
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.addressBookForm.init("add", "");
    },
    // 修改
    edit(id) {
      id =
        id ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      this.$refs.addressBookForm.init("edit", id);
    },
    // 查看
    view(id) {
      this.$refs.addressBookForm.init("view", id);
    },
    // 删除
    del(id) {
      let ids =
        id ||
        this.dataListSelections
          .map((item) => {
            return item.id;
          })
          .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/hr/addressbook/addressBook/delete",
          method: "delete",
          params: { ids: ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
    // 导入成功
    uploadSuccess(res, file) {
      if (res.success) {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: res.msg,
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    // 下载模板
    downloadTpl() {
      this.$utils.download("/dlyrl/hr/addressbook/addressBook/import/template");
    },
    exportExcel() {
      let params = {
        ...this.searchForm,
      };
      this.$utils.download("/dlyrl/hr/addressbook/addressBook/export", params);
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>
<style scoped>
ul {
  margin: 0;
}
</style>